<template>
	<view class="columnY container">

		<view class="centent">
			<view class="radius20 pad-30 font-34">
				<up-form label-width="240rpx" labelPosition="left" :model="formData" ref="ruleFrom">
					<!-- 城市 -->
					<up-form-item label="城市" borderBottom="true">
						<view :class="cityText =='' ? 'place' : ''" class="picker" @click="hanldeCity">
							{{ cityText =='' ? '请选择城市' : cityText }}
						</view>
						<template #right>
							<up-icon color="#999999" name="arrow-right"></up-icon>
						</template>
					</up-form-item>
					<!-- 站点 -->
					<up-form-item label="站点" borderBottom="true">
						<view :class="siteText =='' ? 'place' : ''" class="picker" @click="hanldeSite">
							{{ siteText =='' ? '请选择站点' : siteText }}
						</view>
						<template #right>
							<up-icon color="#999999" name="arrow-right"></up-icon>
						</template>
					</up-form-item>
					<!-- 骑手姓名 -->
					<up-form-item label="骑手姓名" class="mar-top-20" borderBottom="true">
						<up-input clearable placeholderClass="input-style" placeholder="请输入起手姓名" v-model="formData.name"
							border="none" />
					</up-form-item>
					<!-- ID -->
					<up-form-item label="骑手ID" class="mar-top-20" borderBottom="true">
						<up-input clearable placeholderClass="input-style" placeholder="请输入骑手ID"
							v-model="formData.employee_id" border="none" />
					</up-form-item>
					<!-- 手机号 -->
					<up-form-item label="手机号" class="mar-top-20" borderBottom="true">
						<up-input type="number" clearable placeholderClass="input-style" placeholder="请输入手机号"
							v-model="formData.phone" border="none" />
					</up-form-item>
					<!-- 身份证号 -->
					<up-form-item label="身份证号" class="mar-top-20" borderBottom="true">
						<up-input clearable placeholderClass="input-style" placeholder="请输入身份证号"
							v-model="formData.idcard" border="none" />
					</up-form-item>
					<!-- 预支几月配送费 -->
					<up-form-item label="预支几月配送费" class="mar-top-20" borderBottom="true">
						<view :class="timeText =='' ? 'place' : ''" class="picker" @click="hanldeTime">
							{{ timeText =='' ? '请选择月份' : timeText }}
						</view>
						<template #right>
							<up-icon color="#999999" name="arrow-right"></up-icon>
						</template>
					</up-form-item>
					<!-- 预借金额 -->
					<up-form-item label="预借金额" class="mar-top-20" borderBottom="true">
						<up-input clearable placeholderClass="input-style" placeholder="请输入预借金额"
							v-model="formData.money" border="none" />
					</up-form-item>

					<!-- 上传身份证照片 -->
					<up-form-item labelPosition="top" label="上传身份证照片" class="mar-top-20">
						<view class="upload mar-top-20">
							<up-upload :fileList="positiveImage" @afterRead="positiveAfterRead"
								@delete="hanldeDelPositive" name="1" :maxCount="1" width="570rpx" height="372rpx">
								<image src="../../static/image/positive.png" mode="widthFix"
									style="width: 570rpx;height: 372rpx;"></image>
							</up-upload>
							<view class="color-text font-30 text-center mar-top-10">人像面</view>
						</view>
					</up-form-item>

					<!-- 上传身份证照片 -->
					<up-form-item labelPosition="top">
						<view class="upload">
							<up-upload :fileList="backImage" @afterRead="backAfterRead" @delete="hanldeDelPositive"
								name="1" :maxCount="1" width="570rpx" height="372rpx">
								<image src="../../static/image/other.png" mode="widthFix"
									style="width: 570rpx;height: 372rpx;"></image>
							</up-upload>
							<view class="color-text font-30 text-center mar-top-10">国徽面</view>
						</view>
					</up-form-item>

					<!-- 完成单量 -->
					<up-form-item label="完成单量" class="mar-top-20" borderBottom="true">
						<up-input clearable placeholderClass="input-style" placeholder="请输入完成单量"
							v-model="formData.number" border="none" />
					</up-form-item>

					<!-- 单量截图 -->
					<up-form-item labelPosition="top" label="单量截图" class="mar-top-20">
						<up-upload class="mar-top-20" :fileList="images" @afterRead="imagesAfterRead"
							@delete="hanldeDelPositive" name="1" multiple :maxCount="10"></up-upload>
					</up-form-item>

					<!-- 信息备注 -->
					<up-form-item labelPosition="top" label="信息备注">
						<up-textarea class="mar-top-20" v-model="formData.remark" placeholder="请输入备注信息" count
							maxlength="300"></up-textarea>
					</up-form-item>
				</up-form>
			</view>
		</view>
		<view class="button-bottom-box">
			<up-button @click="hanldeApplication" type="primary" text="发起申请"></up-button>
		</view>

		<up-picker @cancel="hanldeClose" @confirm="hanldeCityConfirm" keyName="city" :show="isCity"
			:columns="cityColumns"></up-picker>
		<up-picker @cancel="hanldeClose" @confirm="hanldeSiteConfirm" keyName="title" :show="isSite"
			:columns="siteColumns"></up-picker>
		<up-picker @cancel="hanldeClose" @confirm="hanldeTimeConfirm" :show="isTime" :columns="timeColumns"></up-picker>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'
	// api地址
	import {
		dictionary,
		orderCreate
	} from '../../api/index.js'

	import {
		BASE_URL
	} from '../../common/config.js'

	const formData = reactive({
		city_id: '',
		site_id: '',
		idcard_front: '',
		idcard_back: ''
	})

	const hanldeApplication = () => {
		if (positiveImage.value.length > 0) {
			formData.idcard_front = positiveImage.value[0].url;
		}

		if (backImage.value.length > 0) {
			formData.idcard_back = backImage.value[0].url;
		}

		if (images.value.length > 0) {
			formData.images = images.value.map(item => {
				return item.url;
			}).join(',')
		}

		orderCreate({
			...formData
		}).then(res => {
			console.log(res);

			if (res.data.payInfo == '') {
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				})
				setTimeout(() => {
					uni.navigateBack();
				}, 1000)

			} else {
				// 支付信息存在本地
				uni.setStorageSync('payInfo', res.data);
				// 提交成功跳转页面
				uni.navigateTo({
					url: '/pages/order/order'
				})
			}
		})
	}


	// 选择城市
	let isCity = ref(false);
	const cityColumns = ref([]);
	let cityText = ref('')
	const hanldeCity = () => {
		isCity.value = true;
		cityColumns.value = [cityList.value];
	}

	const hanldeCityConfirm = (e) => {
		isCity.value = false;
		formData.city_id = e.value[0].id;
		cityText.value = e.value[0].city;
	}

	// 选择站点
	let isSite = ref(false);
	const siteColumns = ref([]);
	let siteText = ref('');
	const hanldeSite = () => {
		if (formData.city_id == '') {
			uni.showToast({
				title: '请选选择城市',
				icon: 'none'
			})
			return
		}
		
		isSite.value = true;
		let siteListData = siteList.value.map((item) => {
			if (item.city_id == formData.city_id) {
				return item;
			}
		}).filter(l => l != undefined);
		siteColumns.value = [siteListData];
	}

	const hanldeSiteConfirm = (e) => {
		isSite.value = false;
		formData.site_id = e.value[0].id;
		siteText.value = e.value[0].title;
	}

	// 选择时限
	let isTime = ref(false);
	const timeColumns = ref([]);
	let timeText = ref('');
	const hanldeTime = () => {
		isTime.value = true;
		timeColumns.value = [timeList.value];
	}

	const hanldeTimeConfirm = (e) => {
		isTime.value = false;
		formData.time_limit = e.value[0];
		timeText.value = e.value[0];
	}

	// 关闭弹窗
	const hanldeClose = () => {
		isCity.value = false;
		isSite.value = false;
		isTime.value = false;
	}

	// 获取城市地点预支时限
	let cityList = ref([]);
	let siteList = ref([]);
	let timeList = ref([]);
	const getDictionary = () => {
		dictionary().then(res => {
			let {
				city,
				site,
				time_limit
			} = res.data;

			cityList.value = city;
			siteList.value = site;
			timeList.value = time_limit;
		})
	}

	onLoad(() => {
		getDictionary();
	})


	// 正面
	const positiveImage = ref([]);

	// 删除身份证正面
	const hanldeDelPositive = () => {
		positiveImage.value.splice(event.index, 1);
	}

	// 新增图片
	const positiveAfterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = positiveImage.value.length;
		lists.map((item) => {
			positiveImage.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = positiveImage.value[fileListLen];
			positiveImage.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	// 背面
	const backImage = ref([]);

	// 背面
	const backAfterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = backImage.value.length;
		lists.map((item) => {
			backImage.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = backImage.value[fileListLen];
			backImage.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	// 截图
	const images = ref([]);

	// 截图
	const imagesAfterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = images.value.length;
		lists.map((item) => {
			images.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = images.value[fileListLen];
			images.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	// 上传接口
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: BASE_URL + '/upload',
				filePath: url,
				name: 'limit_image',
				success: (res) => {
					resolve(JSON.parse(res.data).data);
				},
			});
		});
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item,
	::v-deep .u-upload,
	::v-deep .u-textarea {
		margin-top: 20rpx !important;
	}

	.container {
		position: relative;
		padding: 26rpx;
		background-color: #F5F5F6;
		padding-bottom: 140rpx;
		box-sizing: border-box;

		.centent {
			flex-grow: 1;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
	}

	.upload {
		border: 2px dashed #EEEEEE;
		border-width: 2px 2px;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
	}

	.button-bottom-box {
		width: 100%;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		padding: 20rpx 26rpx;
		box-sizing: border-box;
		z-index: +99;
	}

	.u-textarea {
		background: #F5F5F6;
	}

	.u-textarea__count {
		background: #F5F5F6 !important;
	}

	.picker {
		width: 100%;
		text-align: right;
		padding-right: 20rpx;
	}

	::v-deep .input,
	::v-deep .u-input__content__field-wrapper__field {
		text-align: right !important;
		padding-right: 40rpx;
	}

	.input-style {
		text-align: right;
		padding-right: 40rpx;
	}

	.place {
		color: rgb(192, 196, 204);
	}
</style>